<template>
  <!-- <table border="1px">
    <tr>
      <td>疾病名称</td>
      <td>疾病简述</td>
      <td>疾病症状</td>
      <td>疾病成因</td>
      <td>疾病诊断</td>
      <td>疾病治疗</td>
      <td>疾病预防</td>
    </tr>
    <tr>
      <td>{{ diseaseobj.name }}</td>
      <td>{{ diseaseobj.description }}</td>
      <td>{{ diseaseobj.symptom }}</td>
      <td>{{ diseaseobj.cause_reason }}</td>
      <td>{{ diseaseobj.diagnosis }}</td>
      <td>{{ diseaseobj.treatment }}</td>
      <td>{{ diseaseobj.precaution }}</td>
    </tr>
  </table> -->
  <div class="bigbox">
    <el-button type="primary" @click="router.push('/disease_search')">返回上级</el-button>
    <div class="diseasebox">
      <h1>疾病名称</h1><br>
      {{ diseaseobj.name }}
      <h1>疾病简述</h1><br>
      {{ diseaseobj.description }}
      <h1>疾病症状</h1><br>
      {{ diseaseobj.symptom }}
      <h1>疾病成因</h1><br>
      {{ diseaseobj.cause_reason }}
      <h1>疾病诊断</h1><br>
      {{ diseaseobj.diagnosis }}
      <h1>疾病治疗</h1><br>
      {{ diseaseobj.treatment }}
      <h1>疾病预防</h1><br>
      {{ diseaseobj.precaution }}
    </div>
    <div class="doctorbox">
      <h1>推荐医生</h1>
      <a class="doctor" v-for="(item, key) in doctorlist" :key="key" :href="`/doctor_detail?id=${item.id}`">
        <img :src="item.doctor_avatar" alt="" style="width: 50px; height: 50px; border-radius: 50%;">
        <div class="name">{{ item.name }}</div>
        <div class="department">{{ item.department_name }}</div>
        <div class="category">{{ item.category_display }}</div>
        <div class="hospital">{{ item.hospital_name }}</div>
      </a>
    </div>
  </div>
  
</template>

<style scoped>
.bigbox{
  position:relative;
  width: 1300px;
  height: auto;
  margin: 0 auto;
  /* border: 1px solid red; */
  margin-top: 20px;
}
.diseasebox{
  width: 800px;
  height: 500px;
  margin: 0 auto;
  /* border: 1px solid red; */
  margin-top: 20px;
}
.doctorbox{
  width: 240px;
  height: 600px;
  /* border: 1px solid red; */
  position: absolute;
  top:300px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.doctor{
  position: relative;
  width: 200px;
  height: 150px;
}
.name{
  position: absolute;
  top: 10px;
  left: 70px;
}
.department{
  position: absolute;
  top: 40px;
  left: 70px;
}
.category{
  position: absolute;
  top: 70px;
  left: 70px;
}
.hospital{
  position: absolute;
  top: 100px;
  left: 70px;
}
</style>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute()
  const router = useRouter()

  let id = route.query.id

  let diseaseobj = ref({})

  let doctorlist = ref([])

  const getdiseaseobj=()=>{
    axios.get(`http://127.0.0.1:8000/disease/diseaseRetrieve/${id}/`)
    .then(res=>{
      console.log(res)
      diseaseobj.value = res.data
      getdoctorlist()
    })
    .catch(error=>{
      console.log(error)
    })
  }

  const getdoctorlist=()=>{
    axios.get(`http://127.0.0.1:8000/doctor/doctorDepartmentList/?department=${diseaseobj.value.department}`)
    .then(res=>{
      console.log(res)
      doctorlist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  onMounted(()=>{
    getdiseaseobj()
  })

</script>
